<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/MUI/css/mui.picker.min.css">
<script
	src="${pageContext.request.contextPath}/resources/MUI/js/mui.picker.min.js"></script>
</head>
<style>
.mui-ellipsis {
	width: 65%;
}

.btn {
	line-height: 40px;
}
</style>

<body>
	<form class="mui-input-group mui-collapse-content">
		<div class="mui-input-row">
			<label>开始时间:</label> <input id='begin' data-options='{}' class="btn"
				placeholder="开始时间">
		</div>
		<div class="mui-input-row">
			<label>结束时间:</label> <input id='end' data-options='{}' class="btn"
				placeholder="结束时间">
		</div>
		<div class="mui-input-row">
			<label>关键字:</label> <input name="keys" placeholder="关键字"
				style="line-height: 40px;" id="keys">
		</div>
		<div class="mui-button-row">
			<a class="mui-btn mui-btn-primary submit">搜索</a>
		</div>
	</form>
	<div id="leg_table"></div>
	<script type="text/javascript">
        	mui('#offCanvasContentScroll').scroll().scrollTo(0,0);
        
        	$(".mui-title").html("操作日志");
        	
        	//接收数据
    		var stateList = $.legTable({
    			limit: 10,			//默认10
    			page:1,				//默认1
    			id:"#leg_table",	//绑定id
    			url:"/operation/list",
    			cols:[
    				{field: 'userName', title: '操作人'},
    	            {field: 'url', title: '接口地址'},
    	            {field: 'title', title: '内容'},
    	            {field: 'params', title: '参数'},
    	            {field: 'method', title: '请求方法'},
    	            {field: 'creatTime', title: '操作时间'}
    	        ]
    		});
			
			//时间
			var btns = $('.btn');
			var begin = "",end = "";
			btns.each(function(i, btn) {
				btn.addEventListener('tap', function() {
					var _self = this;
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
						var id = this.getAttribute('id');
						_self.picker = new mui.DtPicker(options);
						_self.picker.show(function(rs) {
							if(id == "begin"){
								begin = rs.text;
							}else if(id == "end"){
								end = rs.text;
							}
							$("#"+id).val(rs.text);
							_self.picker.dispose();
							_self.picker = null;
						});
					
				}, false);
			});
           	
			$(".submit").on("touchstart",function(){
           		keys=$("#keys").val();
				$.legTable({
		        	where:{
		        		startTime:begin,
		        		endTime:end,
		        		keys:keys
	        		}
	        	})
			})
			
		</script>
</body>

</html>